import React, { useEffect, useImperativeHandle, useState } from 'react';
import Taro from '@tarojs/taro';
import {Button, Checkbox, Image, ScrollView, Swiper, SwiperItem, Text, View} from '@tarojs/components';
import {AtFloatLayout, AtIcon, AtLoadMore, AtTabs} from "taro-ui";
import {
  ADD_SHARE_VOLUME,
  HOTEL_GET_QR_CODE,
  LIAN_POSTER_INFO,
  PRODUCT_GET_QR_CODE,
  QG_GET_QR_CODE,
  ROOKIEGUID_TASK_RECORD,
  SCENIC_GET_QR_CODE,
  SHARE_SHARE_INFO,
  SHORT_URL,
  TARO_ENV,
  TOURIST_LINE_GET_QR_CODE,
  IDENTITY_IS_SELLER,
  ALI_POSTER_INFO
} from "../../../constants/api";
import {h5Wx} from "../../../utils/h5.service";
import {deepClone} from "../../../utils/tools";
import {getPoster, getPosterTemplateLianZero, getPosterUrl} from '../../../utils/poster.service'
import {http} from "../../../utils/http";
import {newHttp} from "../../../utils/request";
import {user} from "../../../utils/user.service";
import {getLongUrl} from "../../../utils/handlerPublicCode";
import './make-poster.scss';

const MakePoster: React.FC<{ linkUrl?: any; pkeys?: ''; category?: any; commissionPrice?: any; userPower?: string; power?: boolean; sloganList?: any; nums?: number; shareSetting?: any; text: string; itemId?: string; cref?: React.RefObject<any>; showButton?: boolean; friendsArr?: any; uuid?: string; posterType?: string; good?: any; localMealId?: number; lianlainPath?: string; onGetPoster: () => void; }> = (props) => {
  const dataColor = Taro.getStorageSync('colorData');
  const [showFriend, setshowFriend] = useState(false);
  const [show, setShow] = useState(false);
  const [showLead, setShowLead] = useState(false);
  const [nums, setNums] = useState(0);
  const [subscript, setSubscript] = useState(0);
  const [curTabIndex, setCurTabIndex] = useState(0);
  const [shareSettings, setShareSettings] = useState([]);
  const [slogan, setSlogan] = useState('')
  const [poster, setPoster] = useState('')
  const [qrCode, setQrCode] = useState('')
  const [loadMore, setLoadMore] = useState('')
  const [showPoster, setShowPoster] = useState(false)
  const [showDownLoad, setShowDownLoad] = useState(false)
  const [linkUri, setLinkUri] = useState('')
  const [shareSlogan, setShareSlogan] = useState('')
  const tabList = [{title: '推广图文', value: 0}, {title: '生成海报', value: 1}]
  const decodeUnicode = (str: string) => {
    str = str.replace(/\\/g, "%")
    return unescape(str)
  }

  const handlerSyncFunc = async () => {
    if (TARO_ENV === 'h5' && !linkUri) {
      const longUrl = await getLongUrl()
      const jsonObj = await newHttp.post(SHORT_URL, {longUrl})
      setLinkUri(jsonObj.data)
    }
    if (props.shareSetting && props.shareSetting.length > 0 && process.env.SHOW_SHARE_POSTER) {
      const posterUrl = await getPoster(props.posterType, props.uuid || '', null) // 获取海报
      setPoster(posterUrl.url + '?' + Math.random())
      posterUrl && posterUrl.url && props['shareSetting'].map(items => items.unshift({checked: false, url: posterUrl.url, hasPoster: true}))
      const arr = props.shareSetting[subscript]
      setShareSlogan(props.sloganList[subscript].slogan)
      setShareSettings(arr)
    }
  }

  useEffect(() => {
    handlerSyncFunc()
    const sloganText = props.text ? decodeUnicode(props.text) : ''
    setSlogan(sloganText)
  }, [props.posterType, props.shareSetting, props.sloganList, props.text, props.uuid, subscript])

  const showFriendFn = () => {
    setshowFriend(true)
  }
  const makePoster = () => {
    props.onGetPoster(poster)
  }

  const getNums = (arr) => {
    let nums = 0
    arr.map(item => {
      if (item.checked) {
        nums += 1
      }
    })
    setNums(nums)
  }

  const friendChange = async (e) => {
    const i = e.detail.current
    const arr = props.shareSetting[i]
    props['shareSetting'][i] = arr
    setSubscript(i)
    getNums(arr)
    if (show && subscript !== i && curTabIndex !== 1) {
      const data = props.sloganList[i].slogan
      setShareSlogan(data)
      setTimeout(function () {
        if (data) {
          Taro.setClipboardData({
            data
          })
          Taro.showToast({title: '内容已复制'})
        }
      }, 100);
    }
  }

  const shareSet = async () => {
    setShow(true)
    if (props.sloganList && props.sloganList[subscript] && props.sloganList[subscript].slogan) {
      const data = props.sloganList[subscript].slogan
      setShareSlogan(data)
      setTimeout(() => {
        Taro.setClipboardData({
          data: shareSlogan
        })
      }, 100);
      Taro.showToast({title: '内容已复制！'})
    }
  }
  const showCopy = async () => {
    //先判断用户是否存在
    const userInfo = Taro.getStorageSync('user');
    let isSeller = false;
    if (userInfo && process.env.DISTINGUISH_IDENTITY) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      isSeller = identityIsSeller.isSeller;
    }
    const userPower = props.userPower
    const arr = shareSettings
    if (arr && arr[0] && !arr[0].hasPoster) {
      let posterUrl
      if (!poster) {
        posterUrl = await getPoster(props.posterType, props.uuid || '', null) // 获取海报
        setPoster(posterUrl.url + '?' + Math.random())
      }
      posterUrl && posterUrl.url && props['shareSetting'].map(items => items.unshift({checked: false, url: posterUrl.url, hasPoster: true}))
    }
    if (slogan) {
      if (isSeller) {
        shareSet()
      } else { // 普通用户，去向分享注册地址
        const sKey = Taro.getStorageSync('sKey')
        if (process.env.P_ENV === 'kd' && sKey !== '5f9785ef-b81b-46c2-90e0-598e91d6c4b9' && sKey !== '66e7da6efc014cd2be9ccd1b34530562' && sKey !== '3b16d77f556f494db82a3c20d7178ad5' && sKey !== '55ad98a1596040688e170e70fe862868' && !props.pkeys) {
          let mpkey = ''
          const uInfo = Taro.getStorageSync('user') || ''
          if (uInfo && uInfo.mpkey && uInfo.mpkey !== 'undefined') {
            mpkey = uInfo.mpkey
          }
          Taro.redirectTo({url: `/common/distributor/invite/register?mpkey=${mpkey}`})
        } else if (userPower && userPower.includes('2')) {
          shareSet()
        } else {
          shareSet()
        }
      }
    } else {
      if (isSeller && props.sloganList && props.sloganList.length > 0) {
        shareSet()
      } else if (userPower && userPower.includes('2')) {
        shareSet()
      } else {
        makePoster()
      }
    }
  }

  useImperativeHandle(props.cref, () => ({
    show: () => {
      showCopy()
    }
  }))
  const copyAndPoster = () => {
    Taro.setClipboardData({
      data: slogan,
      success: () => {
        makePoster()
      }
    })
    if (TARO_ENV === 'h5' && Taro.getCurrentInstance().router.params.pkeys) {
      return
    }
    user.checkLogin().then(isLogin => {
      if (isLogin) {
        http.HPost(ROOKIEGUID_TASK_RECORD, {remark: "保存海报"})
      }
    })
  }

  const downLoad = async (flag) => {
    let all
    let arr = []
    all = await deepClone(shareSettings)
    if (flag) { // 非全部
      all.map(item => {
        if (item.checked) {
          arr.push(item)
        }
      })
    } else {
      const newArr = []
      shareSettings.map(item => {
        newArr.push({checked: true, url: item.url})
      })
      arr = newArr
      setShareSettings(newArr)
      setNums(0)
      getNums(newArr)
    }
    Taro.showModal({
      title: '提示',
      content: flag ? `确认要下载已选中的${arr.length}张图片吗？` : `确认要下载全部${arr.length}张图片吗？`,
      success: async function (res) {
        if (res.cancel) {
          setShareSettings(all)
          setNums(0)
          let nums = 0
          all.map(item => {
            if (item.checked) {
              nums += 1
            }
          })
          setNums(nums)
        }
        if (res.confirm) {
          getNums(arr)
          Taro.showLoading({title: '保存中...'})
          user.checkLogin().then(isLogin => {
            if (isLogin) {
              http.HPost(ROOKIEGUID_TASK_RECORD, {remark: "保存海报"})
            }
          })
          for (let i = 0; i <= arr.length - 1; i++) {
            if (process.env.TARO_ENV !== 'h5') {
              await Taro.getImageInfo({
                src: arr[i].url
              }).then(async (res) => { // 需要同步处理，否则会因为异步导致写入资源繁忙，无法保存
                await Taro.saveImageToPhotosAlbum({
                  filePath: res.path,
                }).then(() => {
                  if (i == arr.length - 1) {
                    Taro.hideLoading()
                    Taro.showToast({title: '已保存' + (Number(i) + 1) + '张图片'})
                  }
                }).catch(err => {
                  Taro.hideLoading()
                })
              }).catch(err => {
                Taro.hideLoading()
              })
            } else {
              for (let i = 0; i <= arr.length - 1; i++) {
                const a = document.createElement('a');
                a.setAttribute('href', arr[i].url);//图片地址
                a.setAttribute('download', '');//下载时文件名称
                const evobj = document.createEvent('MouseEvents');
                evobj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null)
                a.dispatchEvent(evobj)
                if (i == arr.length - 1) {
                  Taro.hideLoading()
                  Taro.showToast({title: '已保存' + (Number(i) + 1) + '张图片'})
                }
              }
            }
          }
        }
      }
    })
  }
  const copyAndDownLoad = async (flag) => {
    if (flag) {
      if (!shareSettings.some(item => item.checked === true)) {
        return Taro.showToast({title: '请选择您要保存的图片', icon: 'none'})
      }
    }
    // flag 1：全部  0：选中
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    await downLoad(flag)
  }
  const copyAndDowload = async () => {
    Taro.setClipboardData({
      data: slogan,
      success: () => {
        Taro.showToast({title: '复制成功！'})
      }
    })

    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (process.env.TARO_ENV === "weapp") {
      const setting = await Taro.getSetting()
      if (!setting.authSetting['scope.writePhotosAlbum']) {
        await Taro.authorize({
          scope: 'scope.writePhotosAlbum',
        }).catch(() => {
          Taro.showModal({
            title: '提示',
            content: '我们需要权限帮您保存海报到相册，请打开保存到相册',
            cancelText: '不需要',
            confirmText: '好的',
            success: (ret) => {
              if (ret.confirm) {
                Taro.openSetting()
              }
            }
          })
        })
      }
      let poster
      if (props.posterType == 'lianlian') {
        const posterInfo = await http.post(LIAN_POSTER_INFO, {path: props.lianlainPath, posterImg: props.friendsArr[0]})
        if (posterInfo.imgCustomize) {
          poster = await getPosterUrl(posterInfo.imgCustomize, 'lianlian', posterInfo.imgCustomizeKey);
        } else {
          poster = await getPosterUrl(getPosterTemplateLianZero(posterInfo, props.good, props.localMealId), 'lianlian')
        }
      } else if (props.posterType == 'ali') {
        const posterInfo = await http.post(ALI_POSTER_INFO, {path: props.lianlainPath, posterImg: props.friendsArr[0]})
        if (posterInfo.imgCustomize) {
          poster = await getPosterUrl(posterInfo.imgCustomize, 'ali', posterInfo.imgCustomizeKey);
        } else {
          poster = await getPosterUrl(getPosterTemplateLianZero(posterInfo, props.good, props.localMealId), 'ali')
        }
      } else {
        poster = await getPoster(props.posterType, props.uuid || '', null)
      }
      if (poster) {
        Taro.showLoading({title: '下载中...'})
        Taro.getImageInfo({
          src: (props.posterType == 'lianlian' || props.posterType == 'ali') ? poster : poster.url,
        }).then((res) => {
          Taro.saveImageToPhotosAlbum({
            filePath: res.path,
          }).then((res) => {
          })
        }).catch(err => {
        })
      }
      for (let i = 0; i <= props.friendsArr.length - 1; i++) {
        (function (t) {
          setTimeout(function () {
            Taro.getImageInfo({
              src: (props.posterType == 'lianlian' || props.posterType == 'ali') ? props.friendsArr[i] : props.friendsArr[i].url,
            }).then((res) => {
              Taro.saveImageToPhotosAlbum({
                filePath: res.path,
              }).then(() => {
                if (i == props.friendsArr.length - 1) {
                  Taro.hideLoading()
                  Taro.showToast({title: '已保存' + (Number(i) + 1) + '张图片'})
                }
              }).catch(err => {
              })
            }).catch(err => {
            })
          }, 300 * t);
        })(i)
      }
    }
  }

  function checked(checked, index) {
    setNums(0)
    shareSettings[index].checked = !checked
    setShareSettings(shareSettings)
    let nums = 0
    shareSettings.map(item => {
      if (item.checked) {
        nums += 1
      }
    })
    setNums(nums)
  }

  const getSloganList = (data) => {
    return data.some(item => {
      return item.slogan
    })
  }

  const savePhoto = (img) => {
    Taro.showLoading({title: '下载中...'})
    Taro.getImageInfo({
      src: img || qrCode,
    }).then((res) => {
      Taro.saveImageToPhotosAlbum({
        filePath: res.path,
      }).then(() => {
        Taro.hideLoading()
        Taro.showToast({
          title: '保存成功，请进入相册查看',
          icon: 'none'
        })
      })
    }).catch(err => {
      Taro.hideLoading()
      console.log(err)
    })
  }

  const previewImages = (img, images) => {
    const imagesArr = []
    images.map(item => imagesArr.push(item.url))
    Taro.previewImage({
      current: img,
      urls: imagesArr
    })
  }
  const imgClick = (e) => {
    Taro.previewImage({
      current: e,
      urls: [e]
    })
  }
  const getPosterImage = async () => {
    if (!qrCode) {
      const uri = {
        'limit': QG_GET_QR_CODE,
        'scenic': SCENIC_GET_QR_CODE,
        'hotel': HOTEL_GET_QR_CODE,
        'tourist': TOURIST_LINE_GET_QR_CODE,
        'product': PRODUCT_GET_QR_CODE,
      }
      Taro.showLoading({mask: true, title: '获取二维码中...'})
      const params = {gUd: props.uuid || ''}
      const pkeys = props.pkeys
      if (pkeys) {
        params.pkeys = pkeys
      }
      const posters = await http.post(uri[props.posterType], params) // 获取海报
      if (posters.wxVCodeImg) {
        setQrCode(posters.wxVCodeImg)
        Taro.hideLoading()
      }
    }
    setShow(false)
    setShowPoster(true)
  }
  const jumpHome = () => {
    if (TARO_ENV === 'h5') {
      let mpkey = ''
      const userInfo = Taro.getStorageSync('user') || ''
      if (userInfo && typeof userInfo.mpkey != "undefined") {
        mpkey = userInfo.mpkey
      }
      window.location.href = window.location.origin + '/pages/my/index/index?mpkey=' + mpkey
    } else {
      Taro.switchTab({url: '/pages/my/index/index'})
    }
  }
  const tabClick = async (index) => {
    if (index === curTabIndex) {
      return
    }
    setCurTabIndex(index)
    if (index === 1 && !poster) {
      setLoadMore('loading')
      const posters = await getPoster(props.posterType, props.uuid || '', null) // 获取海报
      if (posters) {
        if (!props.pkeys && process.env.DISTINGUISH_IDENTITY) {
          const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
          if (identityIsSeller && identityIsSeller.isSeller) {
            await http.get(SHARE_SHARE_INFO, {category: props.category || 0, main_uuid: props.uuid})
          }
        }
        http.get(ADD_SHARE_VOLUME, {category: props.category || 0, uuid: props.uuid || ''})
        setPoster(posters.url + '?' + Math.random())
        setLoadMore('noMore')
      }
      Taro.hideLoading()
    }
  }
  const showSaveImg = async () => {
    setShow(false)
    setShowDownLoad(true)
  }

  const shareNow = () => {
    setShowLead(true)
    setShow(false)
  }

  return (
    <View>
      {show && !props.power && <View className='poster-wrap' onClick={() => {
        setShow(false)
      }}
      >
        <View className='box'>
          <View style={{
            marginTop: '15px',
            marginBottom: '15px',
            minHeight: '20vh',
            maxHeight: '70vh',
            overflow: 'hidden',
            overflowY: 'auto'
          }}
          >

            <Text className='text'> {slogan} </Text>
          </View>
          <View className='btn-box'>
            <View onClick={() => {
              Taro.setClipboardData({
                data: slogan
              })
            }} className='btn'
            ><Text style='line-height:1; margin-top: -1px;'>复制文字</Text></View>
            <View onClick={copyAndPoster} className='btn2'><Text
              style='line-height:1; margin-top: -1px;'
            >复制文字并生成海报</Text></View>
            <View onClick={showFriendFn} className='btn3'><Text
              style='line-height:1; margin-top: -1px;'
            >一键发圈</Text></View>
          </View>
        </View>
      </View>}
      {props.power &&
      <AtFloatLayout className={`share-setting-float ${TARO_ENV + 'share-setting-float'}`} isOpened={show} title=''
        scrollY onClose={() => {
        setShow(false)
      }}
      >
        <View style='min-height:350px' className={`share-setting ${!props.commissionPrice && 'no-commissionPrice'}`}>
          <View className='share-earn-wrapper'>
            {process.env.DISTINGUISH_IDENTITY && <View>
              <View className='share-earn'>分享后预计可赚
                <Text className='money' style={`color: ${dataColor.priceColor}`}>￥</Text>
                <Text className='price' style={`color: ${dataColor.priceColor}`}>{props.commissionPrice}</Text>
              </View>
              <View className='panel-desc'>
                佣金可在“我的”里面查看
              </View>
            </View>}
            <View className='close-btn' onClick={() => {
              setShow(false)
            }}
            >
              <AtIcon value='close-circle' size='20' color='#bfbfbf' />
            </View>
          </View>
          <View className='poster-body'>
            <AtTabs className={`order-tabs ${TARO_ENV + 'order-tabs'}`} tabList={tabList} current={curTabIndex}
              onClick={tabClick.bind(this)}
            />
            {!curTabIndex && show && <View>
              {props.sloganList && props.sloganList.length > 0 && getSloganList(props.sloganList) &&
              <View className='sloganLists'>
                <View className='slogan-item'>
                  <Swiper
                    className='test-h'
                    autoplay={false}
                    current={subscript}
                    onChange={friendChange}
                  >
                    {props.sloganList.map((item, index) =>
                      <SwiperItem
                        key={index}
                        key={index}
                        className={`w-60 p-lr-20 swiper-item-small ${props.sloganList.length > 1 ? 'swiper-item-small-more' : 'swiper-item-small-one'}`}
                      >
                        <View className={`items-swiper ${TARO_ENV + 'items-swiper'}`}>
                          <Text selectable
                            className={`slogan-info view-inline ${TARO_ENV + 'slogan-info'}`}
                          >{item.slogan}</Text>
                        </View>
                      </SwiperItem>
                    )}
                  </Swiper>
                </View>
              </View>}
              {shareSettings && shareSettings.length > 0 &&
              <ScrollView
                scrollX
                enableFlex
                scrollWithAnimation
                className='images'
              >
                <View className='img-box-poster'>
                  <View className='viewContainer'>
                    <View className='viewLabel'>专属海报</View>
                    {shareSettings && shareSettings.length > 0 && shareSettings.map((items, i) => <View
                      className='images-box img-box'
                      key={i}
                      key={i}
                      onClick={checked.bind(this, items.checked, i)}
                    >
                      <Image mode='aspectFill' src={items.url} className='img'
                        onClick={previewImages.bind(this, items.url, shareSettings)}
                      />
                      {/*{TARO_ENV !== 'h5' && <Checkbox onClick={checked.bind(this, items.checked, i)} className='check-box' value='true' checked={items.checked} />}*/}
                    </View>)}
                  </View>
                </View>
              </ScrollView>
              }
              <View className='range'>
                <View className='range__after' />
              </View>
              <View className='saveImageBtnWrapper' onClick={showSaveImg.bind(this)}>
                <View className='saveImageBtn' style='background-color: #f44;'>
                  <AtIcon value='icon icon-xiazai' color='#fff' size='14px' />保存图片
                </View>
              </View>
            </View>}
            {!!curTabIndex && <View className='loading-more-poster'>
              {loadMore !== 'loading' && TARO_ENV === 'h5' && <View className='poster-save-tip'>长按海报保存到相册</View>}
              {loadMore !== 'loading' &&
              <Image className='gzh-close-img' src={poster} mode='widthFix' onClick={imgClick.bind(this, poster)} />}
              {loadMore === 'loading' && loadMore !== 'loading' &&
              <AtLoadMore status={loadMore} noMoreText='已经到底了~' moreBtnStyle='border:none;' moreText='加载更多' />}
              {TARO_ENV === 'weapp' && <View className='saveImageBtnWrapper' onClick={savePhoto.bind(this, poster)}>
                <View className='saveImageBtn' style='background-color: #f44;'>
                  <AtIcon value='icon icon-xiazai' color='#fff' size='14px' />保存图片
                </View>
              </View>}
            </View>}
          </View>
          {!curTabIndex && <View className='btn-box-f'>
            <View className='btn-box-fixed'>
              {process.env.TARO_ENV !== 'h5' && <Button className='btn-box-item share-button' openType='share'>
                <View className='share-text'><Image className='img' mode='aspectFill'
                  src='https://resource.ivcheng.com/resources/images/wx.png'
                /></View>
                <View>微信好友</View>
              </Button>}
              {process.env.TARO_ENV === 'h5' && <View className='btn-box-item' onClick={() => {
                shareNow()
              }}
              >
                <Image className='img' mode='aspectFill' src='https://resource.ivcheng.com/resources/images/wx.png' />微信好友
              </View>
              }
              {process.env.TARO_ENV === 'h5' && <View className='btn-box-item' onClick={async () => {
                setTimeout(function () {
                  Taro.setClipboardData({
                    data: linkUri
                  })
                  if (process.env.TARO_ENV === 'h5') {
                    Taro.showToast({title: '复制成功！'})
                  }
                }, 100);
                setShow(false)
              }}
              >
                <Image className='img' mode='aspectFill'
                  src='https://resource.ivcheng.com/upload/images/20211029/1635504754889_760.png'
                />复制链接
              </View>}
              {/*<View className='btn-box-item' onClick={() => {
                getPosterImage()
              }}
              >
                <Image className='img' mode='aspectFill'
                  src='https://resource.ivcheng.com/upload/images/20211029/1635504759396_831.png'
                />二维码
              </View>*/}
             {/* {process.env.TARO_ENV === 'h5' && <View className='btn-box-item' onClick={() => {
                window.location.reload()
              }}
              >
                <Image className='img' mode='aspectFill'
                  src='https://resource.ivcheng.com/upload/images/20211029/1635504757107_81.png'
                />专属推广页
              </View>}*/}
              {!props.pkeys && <View className='btn-box-item' onClick={() => {
                jumpHome()
              }}
              >
                <Image className='img' mode='aspectFill'
                       src='https://resource.ivcheng.com/upload/images/20211029/1635504761744_259.png'
                />店主中心
              </View>}
            </View>
          </View>}
        </View>
      </AtFloatLayout>}{/* /upload/images/20211101/1635730981086_923.png */}
      {showLead && <View className='share-lead'>
        <View className='share-guide'>
          <View className='share-guide__arrow' />
          <View className='share-guide-p-t'>
            <View className='share-guide__title'>立即分享给好友吧</View>
            <View className='share-guide__sub'>点击屏幕右上角将本页面分享给好友</View>
          </View>
        </View>
        <View className='share-guide-overlay' onClick={() => setShowLead(false)} />
      </View>}
      <AtFloatLayout isOpened={showFriend} title='一键发圈' scrollY onClose={() => {
        setshowFriend(false)
      }}
      >
        <View style='height:350px'>
          <ScrollView
            scrollY
            className={`friends-slogan friends-slogan-${TARO_ENV}`}
            scrollWithAnimation
            scrollAnchoring
          >
            <View>
              {slogan}
            </View>
          </ScrollView>
          <ScrollView
            scrollY
            className='scrollview'
            scrollWithAnimation
            scrollAnchoring
          >
            <View className='img-box-d'>
              {!!props.friendsArr && props.friendsArr.map((item, i) =>
                <View className='img-box-item' key={i} key={i}> <Image className='img-box-item-img'
                  src={(props.posterType == 'lianlian' || props.posterType == 'ali') ? item : item.url}
                  mode='aspectFit'
                /></View>
              )}
            </View>
          </ScrollView>
          <View className='dowload-btn-box'>
            {TARO_ENV == 'weapp' && <View onClick={copyAndDowload} className='dowload-btn-one'>复制文案并下载图片</View>}
            {TARO_ENV == 'h5' && <View onClick={copyAndDowload} className='dowload-btn-one'>复制文案</View>}
            {TARO_ENV == 'weapp' && <View className='dowload-btn-two'>包含海报下载</View>}
            {TARO_ENV == 'h5' && <View className='dowload-btn-two'>长按图片保存到手机相册</View>}
          </View>
        </View>
      </AtFloatLayout>
      {showPoster && <View className='share-poster'>
        <View className='share-poster-bg' onClick={() => {
          setShowPoster(false)
        }}
        />
        <View className='share-poster-container'>
          <View className='share-poster-body'>
            <View onClick={() => {
              setShowPoster(false)
            }} className='share-poster-close'
            ><AtIcon value='close-circle' size='24' color='#fff' /></View>
            <View onClick={imgClick.bind(this, qrCode)}>
              <Image className='gzh-close-img' src={qrCode} mode='widthFix' />
            </View>
            <View className='saveToPhoto-box' onClick={savePhoto.bind(this)}>
              {TARO_ENV === 'weapp' && <View className='saveToPhoto'>保存到相册</View>}
            </View>
          </View>
        </View>
      </View>}
      {showDownLoad && <View className='inviteFriends-box'>
        <View className='overlay' onClick={() => setShowDownLoad(false)} />
        <View className='invite-box-wrapper'>
          <View className='invite-box-wrapper-info'>
            <View className='wrapper-info-item'><AtIcon size='14px' color='#969799' value='check-circle' /><Text
              className='wrapper-info-text'
            >素材已分享到动态</Text></View>
            <View className='wrapper-info-item'><AtIcon size='14px' color='#969799' value='check-circle' /><Text
              className='wrapper-info-text'
            >文案/链接已复制</Text></View>
          </View>
          {TARO_ENV === 'h5' && <View className='cube-tip-action-desc'>依次长按以下图片保存到相册</View>}
          {shareSettings && shareSettings.length > 0 &&
          <ScrollView
            scrollX
            enableFlex
            scrollWithAnimation
            className='images'
          >
            <View className='img-box-poster'>
              <View className='viewContainer'>
                {shareSettings && shareSettings.length > 0 && shareSettings.map((items, i) => <View
                  className='images-box'
                >
                  <Image mode='aspectFill' src={items.url} className='img'
                    onClick={previewImages.bind(this, items.url, shareSettings)}
                  />
                  {TARO_ENV !== 'h5' &&
                  <Checkbox onClick={checked.bind(this, items.checked, i)} className='check-box-poster' value='true'
                    checked={items.checked}
                  />}
                </View>)}
              </View>
            </View>
          </ScrollView>
          }
          {TARO_ENV !== 'h5' && <View className='btn-box-f-f'>
            <View className='btn-box-fixed-f'>
              <View onClick={copyAndDownLoad.bind(this, 1)} className='btn-box-item-f'><Image className='img-f'
                mode='aspectFill'
                src='https://resource.kedouqinzi.com/resources/images/1629894728238_950.png'
              /><View
                className='save-img-f'
              >保存图片{nums > 0 && <Text>({nums})</Text>}</View></View>
              <View onClick={copyAndDownLoad.bind(this, 0)} className='btn-box-item-f'><Image className='img-f'
                mode='aspectFill'
                src='https://resource.kedouqinzi.com/resources/images/1629894781819_297.png'
              />一键保存全部</View>
            </View>
          </View>}
          <View onClick={() => setShowDownLoad(false)} className='invite-cancel'>我知道了</View>
        </View>
      </View>}
    </View>
  )
}
MakePoster.defaultProps = {
  showButton: true,
  uuid: '',
  pkeys: '',
  commissionPrice: 0,
  category: 0,
  power: false,
  userPower: '',
  posterType: 'limit',
  friendsArr: []
}
export default MakePoster
